<template>
  <div>
    <!-- 导航栏 -->
  
    <div class="title">
      <p>菜谱大全</p>
    </div>
    <caip-zj title="肉类" picture="zhurou.png" :data="data[0]" />
    <caip-zj title="禽蛋" picture="dan.png" :data="data[1]" />
    <caip-zj title="鱼类" picture="yu.png" :data="data[2]" />
  
  </div>
</template>

<script>
import NavigationBar from "@/components/NavigationBar.vue";
import Bottom from "@/components/Bottom.vue";
import CaipZj from "@/components/CaipZj.vue";
export default {
  components: { NavigationBar, Bottom, CaipZj },
  data() {
    return {
      data: [],
    };
  },
  methods: {
    getData(n) {
      if (n == 40) {
        return;
      }
      const url = `v1/caipu/type/${n}`;
      this.axios.get(url).then((res) => {
        console.log(res.data);
        this.data.push(res.data.data);
        this.getData((n += 10));
      });
    },
  },
  mounted() {
    this.getData(10);
  },
};
</script>

<style lang="scss" scoped>
</style>
<style scoped>
.title {

  text-align: center;
  color: #817c74;
  font-size: 18px;
}
</style>